<template>
    <div class="app-page">
        <el-config-provider :locale="locale">
            <el-container v-if="!isFullPage" class="app-page-wrapper">
                <el-container direction="vertical">
                    <StrainHeader v-if="isStrain"/>
                    <Header v-else cur-tab="main"></Header>
                    <el-main class="page-main-container">
                        <div class="contain-wrap">
                            <!-- 面包屑 -->
                            <BreadCrumb v-show="!hideBread" :list="crumbList" :menuList="menuList" :parentKey="parentKey" @link-click="pageJump"></BreadCrumb>
                            <router-view />
                        </div>
                    </el-main>
                    <MainFooter v-show="!hideFooter" :brand="brand" />
                </el-container>
            </el-container>
            <router-view v-else />
        </el-config-provider>
        <guide-frame :brand="brand" @jump="go" @feedback="feedback"></guide-frame>
        <Feedback @on-close="feedbackShow = false" v-if="feedbackShow" />
    </div>
    <ImproveDialog></ImproveDialog>
</template>
<script setup>
import { BreadCrumb } from '@yanxiu/fragment';
import { GuideFrame } from '@yanxiu/guide-frame';
import ImproveDialog from '@/components/improve-info/index.vue';
import { MainFooter } from '@yanxiu/footer';
import Message from '@/components/message/message.js';
import { ElConfigProvider} from 'element-plus';
import { useStore } from 'vuex';
import { useRoute } from 'vue-router';
import { computed, watch, ref } from 'vue';
import locationTransfer from '@/global/location-transfer';
import zhCn from 'element-plus/lib/locale/lang/zh-cn';
import { pageJump } from '@/global/location-transfer';
import Feedback from '@/components/feedback/index'

// 组件区，引入即注册
import Header from '@/components/menu/index.vue';
import StrainHeader from '@/components/menu/strain-header.vue';


const store = useStore();
const route = useRoute();
const feedbackShow = ref(false)

// 汉化
const locale = {
  name: 'zh-cn',
  el: {
    ...zhCn.el,
    pagination: {
      goto: '前往',
      pagesize: '条/页',
      total: '共 {total} 条',
      pageClassifier: '页'
    }
  }
};

// computed区
const isFullPage = computed(() => {
    return !!(route.meta || {}).fullScreen || route.path === '/';
});

// 全部备案信息
const brand = computed(() => {
    return store.state.brand || {};
})
const currentUserId = computed(() => {
    return store.state.currentUser.userId
})

// 面包屑用的导航
const menuList = computed(() => {
    return store.getters['user/userMenus'] || [];
})

// 面包屑用的所属应用的moduleKey
const parentKey = computed(() => {
   return ['moocApplication:square']
})

// 业务上定义的面包屑
const crumbList = computed(() => {
    if(route.meta?.name) {
        return [{name: route.meta?.name}];
    }
    return store.state.breadCrumbList || [];
})

// 隐藏面包屑
const hideBread = computed(() => {
   return route.meta?.hideBread
})

// 隐藏底部
const hideFooter = computed(() => {
    return route.meta?.hideFooter
})

// 继教特殊头部
const isStrain = computed(() => {
    return route.meta?.isStrain
})


watch(() => route.name, async (val) => {
    if(!store.state.user?.initialized) {
        try {
            store.dispatch('common/getInstitutionByBrand');
            await store.dispatch('user/getUserPermissions');
        } catch (err) {
            console.log(err);
        }
    }
    
    if (route.name !== 'login') {
        if (!store.state.user?.initUserInfo) {
            try {
                // 判断是否请求用户信息
                await store.dispatch('user/getCurrentUser');
            } catch (err) {
                console.log(err);
            }
        }
    }
});

// 消息提示
G_listenEvent('toast', (newMsg) => {
    Message({ text: newMsg.message, type: newMsg.type });
});

// toErrorPage
G_listenEvent('toErrorPage', (newMsg) => {
    store.commit('meta', {
        pageMessage: newMsg
    });
});

function go(url) {
    locationTransfer.pageJump(url, true);
}
function feedback(){
    console.log('currentUserId', currentUserId)
    if(!currentUserId.value){
        store.dispatch('logout');
        return false;
    }
    feedbackShow.value = true
}
// 相当于created
locationTransfer.registerRouter();

</script>

<style lang="scss">
@import '~@/assets/styles/common.scss';

#app, .app-page, .app-page-wrapper{
    font-family:"Microsoft YaHei",微软雅黑;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: var(--main-text-color);
    background: var(--main-bg-color);
    min-height: 100vh;
    min-width: 1200px;
}

.contain-wrap {
    width: 1200px;
    margin: 0 auto;
    height: 100%;
}
.page-main-container {
    margin-bottom: 50px;
    padding: 20px 0px;
}
</style>